<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%--验证用户登录--%>
    <c:if test="${empty user}">
        <jsp:forward page="/login"/>
    </c:if>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/input-image-upload.css">

</head>
<body>

<jsp:include page="${APP_PATH}/common/head-mine.jsp"/>
<div class="my-2 col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div id="viewProfile" class="my-2 p-4 bg-white rounded">
        <h5 class="border-bottom border-gray pb-2 mb-0"><i class="fa fa-user"></i>个人信息&nbsp;&nbsp;&nbsp;<a
                id="btn-edit" class="btn btn-sm btn-outline-info">编辑信息</a>
        </h5>
        <%--头像--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-image"></i>头像：</span>
            <div style="clear: both"></div>
            <%--头像为空判断--%>
            <c:choose>
                <c:when test="${not empty user.headimgurl}">
                    <%--用户头像不为空，直接显示--%>
                    <img id="headImg" class="float-left rounded-circle" src="${user.headimgurl}"
                         style="object-fit: cover;width: 80px;height:80px;">
                    <span class="font-weight-light font-info">点击头像预览或修改</span>
                </c:when>
                <c:otherwise>
                    <%--用户头像为空--%>
                    <span>您还没有上传头像，请点击<a id="btn-upload-img" class="btn btn-sm btn-outline-primary">上传</a></span>
                </c:otherwise>
            </c:choose>
            <div style="clear: both"></div>
        </div>

        <%--昵称--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-smile"></i>昵称：${user.nickname}</span>
        </div>

        <%--手机号--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-phone"></i>手机：${user.tel}</span>
        </div>

        <%--邮箱--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-magic"></i>邮箱：${user.email}</span>
        </div>

        <%--性别--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-bath"></i>性别：${user.gender}</span>
        </div>

        <%--个性签名--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-signature"></i>签名：${user.slogan}</span>
        </div>


    </div>
</div>
<%--编辑个人信息--%>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div id="editProfile" class="my-2 p-4 bg-white rounded" style="display: none">
        <h5 class="border-bottom border-gray pb-2 mb-0"><i class="fa fa-edit"></i>编辑个人信息&nbsp;&nbsp;&nbsp;<a
                id="btn-return"
                class="btn btn-sm btn-outline-info">返回</a>
        </h5>
        <%--编辑表单--%>
        <form id="editProfileForm">
            <%--用户id--%>
            <input id="id" name="id" type="hidden" value="${user.id}">

            <%--用户昵称--%>
            <div class="form-group pl-0 mt-2 col-lg-5 col-sm-6 col-md-6">
                <label><i class="fa fa-smile"></i>昵称：</label>
                <input id="nickname" name="nickname" type="text" maxlength="6" class="form-control" required="required" value="${user.nickname}">
            </div>

            <%--邮箱--%>
            <div class="form-group pl-0 col-lg-5 col-sm-6 col-md-6">
                <label><i class="fa fa-magic"></i>邮箱：</label>
                <input id="email" name="email" type="email" maxlength="60" class="form-control" required="required" value="${user.email}">
            </div>

            <%--性别--%>
            <div class="form-group">
                <label><i class="fa fa-bath"></i>性别：</label>
                <label class="radio-inline"><input type="radio" name="gender" value="男" checked="checked">男</label>&nbsp;&nbsp;&nbsp;
                <label class="radio-inline"><input type="radio" name="gender" value="女">女</label>
            </div>

            <%--个性签名--%>
            <div class="form-group">
                <label for="slogan"><i class="fa fa-signature"></i>个性签名：</label>
                <input id="slogan" name="slogan" type="text" maxlength="60" class="form-control form-inline" required="required" value="${user.slogan}">
            </div>
        </form>

        <a id="btn-save-profile" class="btn btn-sm btn-outline-primary">保存</a>
    </div>
</div>

<%--头像编辑界面--%>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div id="editHeadImg" class="my-2 p-4 bg-white rounded" style="display: none">
        <h5 class="border-bottom border-gray pb-2 mb-0"><i class="fa fa-edit"></i>修改头像&nbsp;&nbsp;&nbsp;<a
                id="btn-return-view"
                class="btn btn-sm btn-outline-info">返回</a>
        </h5>
        <%--显示当前头像--%>
        <div class="container ml-0 mt-2 pl-0">
            <%--头像为空判断--%>
            <c:choose>
                <c:when test="${not empty user.headimgurl}">
                    <%--用户头像不为空，直接显示--%>
                    <span><i class="fa fa-image"></i>当前头像：</span>
                    <div style="clear: both"></div>
                    <img class="float-left rounded-circle" src="${user.headimgurl}"
                         style="object-fit: cover;width: 80px;height:80px;">
                    <div style="clear: both"></div>
                </c:when>
                <c:otherwise>
                    <%--用户头像为空--%>
                    <span>请选择正方形的图片：</span>
                </c:otherwise>
            </c:choose>
        </div>

        <%--头像上传表单--%>
        <form enctype="multipart/form-data">
            <div class="form-group">
                <div style="clear: both"></div>
                <div class="input-image-uploader">
                    <ul class="input-image-files pl-0" id="uploaderFiles">

                    </ul>
                    <div class="input-image-box">
                        <input id="uploaderInput" class="input-image" type="file" name="files" accept="image/*">
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </form>
        <a id="btn-save" class="btn btn-sm btn-outline-info disabled" data-flag="false">保存图片</a>

    </div>
</div>

<%--图片预览，画廊使用--%>
<div class="my-gallery" id="gallery">
    <span class="my-gallery-img" id="galleryImg"></span>
    <div class="my-gallery-option">
        <%--删除按钮--%>
        <i id="icon-delete" class="fa fa-trash-alt fa-2x" style="color: white"></i>&nbsp;&nbsp;&nbsp;
        <%--修改按钮--%>
        <i id="icon-update" class="fa fa-edit fa-2x" style="color:white;"></i>
    </div>
</div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>
<script>
    //点击编辑按钮
    $("#btn-edit").click(function () {
        $("#viewProfile").hide();
        $("#editProfile").show();
    });

    //点击btn-upload-img按钮
    $("#btn-upload-img").click(function () {
        $("#viewProfile").hide();
        $("#editHeadImg").show();
    });

    //点击返回1按钮
    $("#btn-return").click(function () {
        $("#editProfile").hide();
        $("#viewProfile").show();
    });

    //点击返回按钮2
    $("#btn-return-view").click(function () {
        $("#editHeadImg").hide();
        $("#viewProfile").show();
    });

    //设置头像的图片预览
    $("#headImg").click(function () {
        $("#galleryImg").attr("style", "background-image:url(" + $(this).attr("src") + ")");
        //隐藏删除按钮
        $("#icon-delete").hide();
        $("#gallery").fadeIn(100);
    });

    //退出图片预览界面
    $("#gallery").on("click", function () {
        $("#gallery").fadeOut(100);
    });

    //进入头像编辑界面
    $("#icon-update").click(function () {
        //显示头像编辑div，隐藏其他div
        $("#viewProfile").hide();
        $("#editHeadImg").show();
        $("#gallery").fadeOut(100);
    });

    //点击修改用户信息按钮，字段验证
    $("#btn-save-profile").click(function () {
        //验证字段
        var nickname = $("#nickname").val();
        var email = $("#email").val();
        var gender = $("input[name='gender']").val();
        var slogan = $("#slogan").val();

        if (nickname.length > 6 || nickname.length < 2) {
            toastr.error("你的昵称不合法，请修改为2-6长度的字符！");
            return false;
        }
        //邮箱正则
        var regex_email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
        if (!regex_email.test(email)) {
            toastr.error("你的邮箱格式不合法，请重新输入正确的邮箱！");
            return false;
        }
        if (gender === '' || gender === undefined) {
            toastr.error("请选择您的性别！！");
            return false;
        }
        if (!slogan) {
            toastr.error("请输入你的个性签名！");
            return false;
        }

        $.ajax({
            url: '/updateProfile',
            data: $("#editProfileForm").serialize(),
            type: 'POST',
            success: function (result) {
                if (result.code === 100) {
                    window.location.reload(true);
                }else{
                    toastr.error(result.extend.error);
                }
            }
        })
    });

    //头像修改
    $(function () {
        var $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");
        var lil = "";

        //添加图片
        $uploaderInput.on("change", function (e) {
            var src;  //用于图片显示的地址
            var url = window.URL || window.webkitURL || window.mozURL;  //本地地址，用于图片显示的绝对地址
            var files = e.target.files;  //选取的图片文件
            var file = files[0];
            // 过滤掉非图片类型文件
            if (file.type.match('image.*')) {
                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
                var tmpl = '';
                //动态创建li标签，用于显示符合的图片
                tmpl += '<li class="input-image-file"' + 'id="' + file.name + '" style="background-image:url(' + src + ')"></li>';
                $uploaderFiles.append(tmpl);
                ++lil;  //把创建的li标签加1，用于判断图片是否到达规定数目
            }
            //做判断，如果图片达到9张
            if (lil >= 1) {
                $('.input-image-box').css('display', 'none');
                $("#btn-save").attr("data-flag", "true");
                $("#btn-save").removeClass("disabled");
            } else {
                $('.input-image-box').css('display', 'block');
            }

        });


        var index;
        var tid;

        //预览图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            tid = $(this).attr("id");
            $galleryImg.attr("style", this.getAttribute("style"));
            //隐藏修改icon
            $("#icon-update").hide();
            //显示删除icon
            $("#icon-delete").show();
            $gallery.fadeIn(100);
        });

        //删除图片
        $("#icon-delete").click(function () {
            $("#uploaderInput").val('');
            //删除该图片的节点
            $uploaderFiles.find("li").eq(index).remove();
            --lil;   //存储li标签的个数减1
            //做判断，如果图片到达9张

            $('.input-image-box').css('display', 'block');
            if (lil < 1) {
                //修改保存按钮属性
                $("#btn-save").attr("data-flag", "false");
                $("#btn-save").addClass("disabled");
            }
        });

        //上传图片
        $("#btn-save").click(function () {
            //上传图片
            if ($("#btn-save").attr('data-flag') === 'true') {
                //js获取图片对象
                var formFile = new FormData();
                formFile.append("files", document.getElementById("uploaderInput").files[0]);
                $.ajax({
                    url: "/filesUpload",
                    data: formFile,
                    type: "POST",
                    dataType: "json",
                    cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
                    success: function (result) {
                        //接收返回的图片路径
                        if (result.code === 100) {
                            //图片上传成功
                            var imgUrl = result.extend.fileList.index0;
                            //保存头像
                            $.ajax({
                                url: '/saveHeadImg',
                                data: {headImgUrl: imgUrl},
                                type: 'POST',
                                success: function (result) {
                                    if (result.code === 100) {
                                        //保存成功
                                        window.location.reload(true);
                                    } else {
                                        //保存失败，请稍后重试
                                        toastr.error(result.extend.error);
                                    }
                                }
                            })
                        } else {
                            toastr.success("图片上传失败，请重试！！！");
                        }
                    }
                })
            } else {
                toastr.error("请先选择图片");
            }
        })
    });

</script>

</body>

</html>
